<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="article-detail">
            <el-card>
                <div>
                    <div>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/discuss' }">生活</el-breadcrumb-item>
                            <el-breadcrumb-item><span>{{ articleInfo.articleTitle }}</span></el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <h2>{{ articleInfo.articleTitle }}</h2>
                    <div class="title-info">
                        <p class="el-icon-user-solid">{{ articleInfo.articleAuthor }}</p>
                        <el-divider direction="vertical"></el-divider>
                        <p class="el-icon-time">{{ $moment(articleInfo.createdTime).format('YYYY-MM-DD') }}</p>
                        <el-divider direction="vertical"></el-divider>
                        <p class="el-icon-view">{{ articleInfo.articleViews }}</p>
                        <!-- <el-divider direction="vertical"></el-divider>
                        <p class="el-icon-message">{{ article.comment }}</p> -->
                    </div>
                </div>
                <el-divider></el-divider>
                <div v-html="articleInfo.articleContent" ref="articleContent"></div>
                <el-divider></el-divider>
                <el-link v-if="articleInfo.upArticleTitle" icon="el-icon-arrow-left" @click="showUpArticle">
                    上一篇:
                    <span>{{ articleInfo.upArticleTitle }}</span>
                </el-link>
                <el-link v-else>
                    <span>没有上一篇了</span>
                    <i class="el-icon-arrow-right"></i>
                </el-link>
                <el-link v-if="articleInfo.dowArticleTitle" style="float: right;" @click="showDowArticle">
                    下一篇:
                    <span>{{ articleInfo.dowArticleTitle }}</span>
                    <i class="el-icon-arrow-right"></i>
                </el-link>
                <el-link v-else style="float: right;">
                    <span>没有下一篇了</span>
                    <i class="el-icon-arrow-right"></i>
                </el-link>
            </el-card>
            <div class="toc">
                
            </div>
        </div>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import NavigationBar from '@/components/NavigationBar';
import discussInfoApi from '@/api/discussInfo';

export default {
    components: {
        NavigationBar,
    },
    name: 'ArticleDetail',
    data() {
        return {
            lifeArticleInfo: {},
            articleInfo: {},
            headers: [],
            markdownContent: '',
        };
    },
    methods: {
        // 获取文章详情
        async getLifeArticleInfoDtl(lifeArticleInfo) {
            try {
                const res = await discussInfoApi.getLifeArticleInfoDtl(lifeArticleInfo);
                this.articleInfo = res;
                console.log('文章信息:', this.articleInfo);
                this.markdownContent = this.articleInfo.articleContent;
                // console.log('标题:', titles);
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
        // 上一篇
        async showUpArticle() {
            this.$router.push({ path: `/discuss/detail/${this.articleInfo.upArticleId}` });
            try {
                const upArticleInfo = { id: this.articleInfo.upArticleId };
                const res = await discussInfoApi.getLifeArticleInfoDtl(upArticleInfo);
                this.articleInfo = res;
                console.log('文章详情:', this.articleInfo);
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
        // 下一篇
        async showDowArticle() {
            this.$router.push({ path: `/discuss/detail/${this.articleInfo.dowArticleId}` });
            try {
                const upArticleInfo = { id: this.articleInfo.dowArticleId };
                const res = await discussInfoApi.getLifeArticleInfoDtl(upArticleInfo);
                this.articleInfo = res;
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
        
    },
    mounted() {
        // mounted here
        console.log('当前文章id:', this.$route.params.id);
        this.lifeArticleInfo = { id: this.$route.params.id };
        this.getLifeArticleInfoDtl(this.lifeArticleInfo);
    },

};
</script>

<style scoped>
.article-detail {
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.title-info {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    font-size: 12px;
    /* background-color: #99a9bf; */
}

.button {
    color: #050b10;
    font-size: 14px;
    text-decoration: none;
}

.toc {
    background-color: aqua;
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>